<template>
  <section class="courses">
    <el-form class="actions" :inline="true" :model="filter">
      <el-form-item class="input-title" label="课程名称">
        <el-input
          v-model="filter.courseName"
          type="search"
          placeholder="课程名称"
        />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="filter.status" placeholder="课程状态">
          <el-option label="全部" value></el-option>
          <el-option label="上架" value="1"></el-option>
          <el-option label="下架" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleFilter">查询</el-button>
      </el-form-item>
      <el-form-item class="btn-add">
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd"
          >新建课程</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 课程数据展示 table  -->
    <el-table
      :data="courses"
      v-loading="loading"
      element-loading-text="数据加载中..."
    >
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
      <el-table-column prop="courseName" label="课程名称"></el-table-column>
      <el-table-column
        prop="price"
        label="价格"
        align="center"
        min-width="140"
        :formatter="priceFormatter"
      ></el-table-column>
      <el-table-column
        prop="sortNum"
        label="排序"
        align="center"
        min-width="100"
      ></el-table-column>

      <el-table-column
        prop="status"
        label="状态"
        align="center"
        min-width="120"
      >
        <template slot-scope="scope">
          <i
            class="status status-success"
            title="上架"
            v-if="scope.row.status === 1"
          ></i>
          <i
            class="status status-danger"
            title="下架"
            v-else-if="scope.row.status === 0"
          ></i>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="260">
        <template slot-scope="scope">
          <!-- 状态按钮 -->
          <el-button
            size="mini"
            type="danger"
            v-if="scope.row.status === 1"
            @click="handleToggleStatus(scope.row)"
            >下架</el-button
          >
          <el-button
            size="mini"
            type="success"
            v-else-if="scope.row.status === 0"
            @click="handleToggleStatus(scope.row)"
            >上架</el-button
          >
          <!-- 点击对应的组件编辑，转向CourseItem组件 -->
          <el-button
            size="mini"
            @click="handleNavigate('CourseItem', scope.row.id)"
            >编辑</el-button
          >
          <!-- 点击对应的组件内容管理，转向CourseSections组件 -->
          <el-button
            size="mini"
            @click="handleNavigate('CourseSections', scope.row.id)"
            >内容管理</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>

<script>
import title from "@/plugins/title";
import { axios } from "@/utils";

export default {
  name: "Courses",
  title: "课程管理",
  // 数据不买粉
  data() {
    // 查询条件
    const filter = {
      courseName: "",
      status: "",
    };
    return {
      filter,
      courses: [], // 课程数据
      loading: false,
    };
  },
  // 钩子函数
  created() {
    this.loadCourses();
  },
  methods: {
    loadCourses() {
      this.loading = true;
      const data = {};
      if (this.filter.courseName != null) data.filter = this.filter.courseName;
      if (this.filter.status != null) data.filter = this.filter.status;
      // 发送请求，axois请求
      return axios
        .post("/course/findCourseByCondition", data)
        .then((resp) => {
          this.courses = resp.data.content;
          this.loading = false;
        })
        .catch((error) => {
          this.$message.error("数据获取失败！！！！！！");
        });
    },
  },
  // handleFilter处理的查询的请求，有条件的查询和无条件的查询是一个方法
  handleFilter() {
    this.loadCourses();
  },

};
</script>

<style lang="scss">
.courses {
  .actions {
    display: flex;
    align-items: flex-end;
  }

  .input-title {
    .el-form-item__content {
      min-width: 22vw;
    }
  }

  .btn-add {
    margin-left: auto;
  }
}
</style>
